<template>
  <div class="home-ddq">
    <div class="home-ddq-header">
      <h3 class="home-ddq-header-title">咚咚抢</h3>
      <span class="home-ddq-header-tip">整点特惠开抢</span>
    </div>
    <div class="home-ddq-content">
      <van-tabs v-model:active="ddqActive">
        <van-tab
          v-for="(item, index) in ddqList"
          :key="index"
          :name="item.timeDesc"
        >
          <template #title>
            <div class="home-ddq-time">
              <span>{{ item.timeDesc }}</span>
              <span v-if="item.status == -1">已开抢</span>
              <span v-if="item.status == 0">正在疯抢</span>
              <span v-if="item.status == 1">即将开始</span>
            </div>
          </template>
          <div class="home-ddq-goods">
            <div
              v-for="ele in item.ddqGoodsList"
              :key="ele.id"
              class="home-ddq-good"
            >
              <div class="home-ddq-good-img">
                <img :src="ele.pic" alt="图片加载失败" />
              </div>
              <div class="home-ddq-good-price">
                <span class="home-ddq-good-newprice">¥{{ ele.price }}</span>
                <span class="home-ddq-good-oldprice">
                  ¥{{ ele.orginPrice }}
                </span>
              </div>
              <div class="home-ddq-good-sale">
                已抢{{
                  ele.salesNum > 10000
                    ? parseInt(ele.salesNum / 10000) + "w"
                    : ele.salesNum
                }}
              </div>
              <span class="home-ddq-good-word" v-if="ele.newWords">
                {{ ele.newWords }}
              </span>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, onMounted } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  setup() {
    const store = useStore();
    const ddqList = computed(() => store.state.home.ddqList);
    const ddqActive = computed(() => store.state.home.ddqActive);
    onMounted(() =>
      store.dispatch({
        type: "home/getDdqList",
        data: {
          entityId: 4,
          modelId: 28994,
          proModelId: 20,
          source: 3,
          version: "v1",
          v: 1623725585738,
          random: 1469,
          tuserId: 771131,
          isWechat: 0,
        },
      })
    );
    return {
      ddqList,
      ddqActive,
    };
  },
});
</script>

<style lang="stylus" scoped>
.home-ddq {
  background: white;
  margin-top: 0.1rem;
  border-radius: 0.05rem;
  overflow: hidden;
  padding: 0.1rem;

  .home-ddq-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.2rem;

    .home-ddq-header-title {
      font-size: 0.15rem;
      font-weight: normal;
      margin: 0;
    }

    .home-ddq-header-tip {
      font-size: 0.12rem;
      color: #888;
      margin-left: 0.06rem;
    }
  }

  .home-ddq-content {
    /deep/ .van-tabs__wrap {
      height: 0.4rem;
    }

    /deep/.van-tabs__line {
      display: none;
    }

    /deep/.van-tab {
      padding: 0;
      background: #f8f8f8;
      border-radius: 0.18rem;
      font-size: 0.12rem;
      width: 0.72rem;
      height: 0.36rem;
      color: #777;

      &.van-tab--active {
        background: #fe3c35;
        color: white;
      }

      .home-ddq-time {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 0.14rem;
      }
    }

    .home-ddq-goods {
      display: flex;
      align-items: center;
      overflow-x: auto;
      margin-top: 0.1rem;

      &::-webkit-scrollbar {
        display: none;
      }

      .home-ddq-good {
        font-size: 0.12rem;
        margin: 0 0.05rem;
        position: relative;

        .home-ddq-good-img {
          width: 1.05rem;
          height: 1.05rem;
          border-radius: 0.05rem;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .home-ddq-good-price {
          display: flex;
          justify-content: center;
          margin-top: 0.1rem;
          height: 0.16rem;

          .home-ddq-good-newprice {
            height: 12px;
            font-size: 16px;
            font-weight: 500;
            color: #fe3738;
            line-height: 12px;
            margin-right: 5px;
            margin-bottom: 8px;
          }

          .home-ddq-good-oldprice {
            height: 12px;
            font-size: 11px;
            font-weight: 400;
            color: #888;
            line-height: 12px;
            text-decoration: line-through;
          }
        }

        .home-ddq-good-sale {
          text-align: center;
          color: #fe3d3a;
        }

        .home-ddq-good-word {
          position: absolute;
          top: 0.95rem;
          left: 0.15rem;
          color: #f60;
          font-size: 0.11rem;
          background: white;
          width: 0.75rem;
          height: 0.14rem;
          text-align: center;
          border-radius: 0.07rem;
        }
      }
    }
  }
}
</style>
